<template>
  <div class="shoppingCart-container">
    <Header />
    <div class="topHeaders">
      <div>购物车</div>
      <div>
        <el-button size="mini"
          type="danger"
          @click="operaGoods()"
          :disabled="currentGoodsIdx.length!=0 ? false : true">
          批量删除<span v-if="currentGoodsIdx.length!=0">({{currentGoodsIdx.length}})</span></el-button>
      </div>
    </div>
    <div class="goodsTables">
      <el-table :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection"
          width="55">
        </el-table-column>

        <el-table-column width="180">
          <template slot-scope="scope">
            <img style="height:80px;width:80px;"
              :src="scope.row.commodity.picture" />
          </template>
        </el-table-column>

        <el-table-column prop="commodity.name"
          label="名称"
          width="180">
        </el-table-column>

        <el-table-column prop="commodity.price"
          label="单价">
        </el-table-column>

        <el-table-column label="规格">
          <template slot-scope="scope">
            {{scope.row.commcolor+"/"+scope.row.commodguige}}
          </template>
        </el-table-column>

        <el-table-column label="数量">
          <template slot-scope="scope">
            <el-input-number size="mini"
              @change="(val)=>{changeGoodsNum(val,scope.row.commodityid)}"
              v-model="scope.row.commoditysum"
              :min="1"></el-input-number>
          </template>
        </el-table-column>

        <el-table-column label="小计">
          <template slot-scope="scope">
            {{Math.floor(scope.row.commodity.price*scope.row.commoditysum * 100) / 100}}元
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button icon="el-icon-delete"
              @click="deleteGoods(scope.row.commodityid)"
              circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottomBar">
      <div class="left-container">
        <p>共{{tableData.length}}件，已选中{{currentGoodsIdx.length}}件</p>
      </div>
      <div class="right-container">
        <p>共计:<span class="miniFont">￥</span><span class="normalFont">{{sumPrice()}}<span class="miniFont">元</span></span></p>
        <button @click="counter()">结算</button>
      </div>
    </div>

    <Bottom></Bottom>
  </div>
</template>

<script>
//全局header
import Header from '@/components/modules/header.vue';
//api
import {
  GetShoppingCatbyUseid,
  updateSPSum,
  DeleteSP,
  updateStatus,
} from '@/utils/api/api.js';
//Bottom组件
import Bottom from '@/components/modules/bottom.vue';
export default {
  components: {
    Header,
    Bottom,
  },
  data() {
    return {
      userId: '', //当前用户Id

      tableData: [], //购物车数据

      currentGoodsIdx: [], //当前选中数组

      currentGoods: [], //当前选中的商品数据
    };
  },
  methods: {
    //获取购物车
    mac() {
      GetShoppingCatbyUseid(this.userId).then(resp => {
        this.tableData = resp.msg;
      });
    },

    //根据id改变购物车商品数量
    changeGoodsNum(num, id) {
      updateSPSum(num, id).then(resp => {
        if (resp.code == 200) {
          this.$message({
            type: 'success',
            message: '数量改变成功',
          });
        }
      });
    },

    //删除商品
    deleteGoods(id) {
      DeleteSP(id, this.userId).then(resp => {
        if (resp.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功',
          });
          this.mac();
        }
      });
    },

    //勾选操作
    handleSelectionChange(data) {
      this.currentGoods = data;
      this.currentGoodsIdx = data.map(item => {
        return item.commodityid;
      });
    },

    //批量删除当前勾选商品
    operaGoods() {
      this.currentGoodsIdx.forEach(item => {
        this.deleteGoods(item);
      });
    },

    //商品计数器
    sumPrice(){
      let price=0
      this.currentGoods.forEach(item=>{
        price+=item.commoditysum*item.commodity.price
      })
      return Math.floor(price *100) / 100
    },
    //结算
    counter(){
       if (this.currentGoodsIdx.length == 0) {
        this.$message({
          type: "info",
          message: "至少选择一件商品"
        });
      } else {
        this.currentGoodsIdx.forEach(item => {
          updateStatus(this.userId,item,1).then(resp => {
          });
        });
        this.$router.push({
          path: "/counter",
          query: {
            idx: this.currentGoodsIdx
          }
        });
      }
    }

  },
  created() {
    const user = JSON.parse(localStorage.getItem('user'));
    this.userId = user.uid;
    this.mac();
  },
};
</script>

<style lang="scss" scoped>
@import './shoppingcart.scss';
.topHeaders {
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
  width: 1200px;
  margin: 10px auto;
  box-sizing: border-box;
  padding: 10px;
  align-items: center;
}
.goodsTables {
  display: flex;
  margin: 0 auto;
  width: 1200px;
}
.bottomBar {
  display: flex;
  width: 1200px;
  margin: 10px auto;
  justify-content: space-between;
  align-items: center;
  background-color: #f8f8f8;

  .left-container {
    margin: 10px;
  }

  .right-container {
    display: flex;
    justify-content: left;
    align-items: center;
    .miniFont {
      font-size: 14px;
      color: red;
    }
    .normalFont {
      font-size: 30px;
      color: red;
    }
    button{
      background-color: orange;
      border: none;
      box-sizing: border-box;
      padding: 10px 40px;
      font-size: 20px;
      color: #f8f8f8;
      margin-left:20px; 
    }
  }
}
</style>
